<script setup lang="ts">
import { ref} from 'vue';
import {useRouter} from 'vue-router'

const router = useRouter()

const username = ref<string>('')
const password = ref<string>('')


// 提交函数
const onSubmit = ()=>{
    router.push('/')
};

</script>

<template>
 <div class="regin font-semibold text-2xl">
    <div class="title">
        <h1>书籍销售管理系统</h1>
    </div>
    <div class="sign-in">
        <a-input v-model:value="username" placeholder="账号" class="input-regin" />
        <br />
        <a-input-password v-model:value="password" placeholder="密码" class="input-regin" />
        <br />
        <a-config-provider :theme="{
            token: {
            colorPrimary: '#2DD4BF',
            },
        }">
            <a-button type="primary" :size="'large'" class="submit" @click="onSubmit">Sign In</a-button>
        </a-config-provider>
    </div>
 </div>
</template>

<style scoped>
.regin{
    position: absolute;
    top:35%;
    left:35%;
    width:30vw;
    height:40vh;
    background: rgba(255,255,255,0.2);
    color:white;

    /* 使其子元素水平居中 */
    display: flex;
    flex-direction: column;    
    align-items: center;
}
.title{
    margin-top:5%;
}
.sign-in{
    margin-top:5%;
}
.input-regin{
    width: 250px;
    margin-top: 30px;
}
.submit{
    margin-left: 30%;
    margin-top:20px;
}

</style>